<template>
	<!-- 学生 教师学习资源列表 -->
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center zy_flex_0_ibhf"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub zy_fd0_0_ibhf'>
					<view class='flex flex-wrap align-center zy_fd0_0_c0_ibhf' @tap.stop="back">
						<text class='fu-iconfont2  zy_fd0_0_c0_c0_ibhf'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='zy_fd0_0_c1_c0_ibhf'>{{name}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end zy_fd0_0_c0_ibhf'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center zy_flex_1_ibhf">
				<view class='flex flex-wrap align-center zy_fd1_0_ibhf'>
					<text class='fu-iconfont2  zy_fd1_0_c0_ibhf'>&#xe722;</text>
					<benben-input class='zy_fd1_0_c1_ibhf' v-model="key" type="text" :placeholder="`请输入关键词进行搜索`" confirm-type="done"
						:maxlength="-1" :adjust-position='true' placeholder-style="color:#999;font-size:28rpx"  @confirm="getlists()" />
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局2flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout zy_flex_2_ibhf" v-if="list.length>0 && isup " v-for="(item,index) in list" :key='index'>
				<view class='flex flex-wrap align-center zy_fd2_0_ibhf' v-if="item.type=='folder'" @tap.stop="jump(1,item,index)">
					<image class='zy_fd2_0_c0_ibhf' mode="aspectFit" :src='STATIC_URL+"dir.png"'></image>
					<text class='zy_fd2_0_c1_ibhf'>{{item.name}}</text>
					<text class='fu-iconfont2  zy_fd2_0_c2_ibhf'>&#xe7f2;</text>
				</view>
				<view class='flex flex-wrap align-center zy_fd2_1_ibhf' v-if="item.type=='file'" @tap.stop="jump(2,item,index)">
					<!-- <image class='zy_fd2_1_c0_ibhf' mode="aspectFit" :src='STATIC_URL+"ppt.png"'></image> -->
					<image class='zy_fd2_1_c0_ibhf' mode="aspectFit" :src='item.file_type==1?STATIC_URL+"png.png":item.file_type==2?STATIC_URL+"k1.png":item.file_type==3?STATIC_URL+"bg.png":item.file_type==4?STATIC_URL+"pdf.png":item.file_type==5?STATIC_URL+"ppt.png":item.file_type==6?STATIC_URL+"word.png":item.file_type==7?STATIC_URL+"mp3.png":item.file_type==8?STATIC_URL+"ys.png":STATIC_URL+"word.png"'>
												</image>
					<view class='flex flex-direction flex-wrap align-stretch flex-sub zy_fd2_1_c1_ibhf'>
						<text class='zy_fd2_1_c1_c0_ibhf'>{{item.name}}</text>
						<text class='zy_fd2_1_c1_c1_ibhf'>{{item.file_size}}</text>
					</view>
				</view>
				
			</view>
			<view v-if="list.length==0 && isup ">
				<slot>
					<view class="public-page-empty">
						<image src='/static/global/order.png'></image>
						<view class="txt">暂无数据</view>
					</view>
				</slot>
			</view>

			<!---flex布局2flex布局结束-->
		<!-- 	<view class="flex flex-wrap align-center justify-center benben-position-layout flex zy_flex_3_ibhf"
				v-if="group==2">
				<button class='zy_fd3_1_ibhf'>新增资源</button>

			</view> -->
			<view :style="{height: '350rpx'}"></view>
		

		</view>
	</page-body>
</template>
<script>
	import filePreview from '@/common/utils/filePreview.js'
	import pagingList from '@/common/mixin/paging_list.js';
	export default {
		components: {},
		mixins: [pagingList,filePreview],


		data() {
			return {
				group: uni.getStorageSync('USER_GROUP'),
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				list:[],
				key:'',//搜索关键字
				id:'',//课程id
				folder_id:'0',//目录id
				isup:false,
				arrid:'',//记录跳转页面目录id
				aid:'0',//顶级目录id
				name: '课程资源', //顶级文件夹名字
			}; 
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.id=options.course
			this.getlists()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			async getlists() {
				// this.minixPagingListsApi = global.apiUrls.post68cbb2c2b9442;
				// this.pageingListApiMethod = 'get';
				// this.allowOnloadGetList = false;
				// this.pagingListPostDataContent = {
				// 	course_id: this.id,	
				// 	name:this.name,
				// 	folder_id:this.folder_id,
				// }

				// this.listData = [];
				// this.list = this.listData;
				// this.pagingListToggle();
				// this.$forceUpdate()
				this.isup=false
				let res = await this.$api.post(global.apiUrls.post68cbb2c2b9442, {
					course_id: this.id,	
					name:this.key,
					folder_id:this.folder_id,
				});
				this.isup = true
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
							
				this.list = res.data.data.map(item=>{
					let hz=item.file_type_name
					if(item.type=='file'){
						item.file_type= hz=='图片'?1:hz=='表格'?3:hz == '视频' ? 2 : hz == 'PDF' ? 4 : hz == 'PPT' ? 5 : hz == '文档' ?6 : hz == '音频' ?7: hz == '压缩文件' ?8 : hz == 'pptx' ?5:''
					}
					return item
				})
				console.log(this.list)
			},
			back(){
				if(!this.arrid || this.folder_id==this.aid){
					uni.navigateBack()
				}else{
					this.arrid=this.arrid.slice(0, -1)
					let arr=this.arrid.split(',')
					let newitem =arr[arr.length - 1]
					this.folder_id=newitem.split('/$$')[0]
					this.name=newitem.split('/$$')[1]
					let str =',' + newitem;
					this.arrid = this.arrid.replace(str, "");
					this.arrid =this.arrid +','
					this.list=[]
					this.getlists()
				}
			},
			jump(type,item, index) {
				if(type==1){
					// 前进一页面追加一条数据
					this.arrid+=this.folder_id+'/$$'+this.name+','
					this.folder_id=item.aid
					this.name=item.name
					this.list=[]
					this.getlists()
				}else{
					if(item.file_type==2){
						let rate='0'
						uni.navigateTo({
							url: `/pages/course/scourseStudy/scourseStudy?url=${item.file_path}&file_type=${item.file_type}&aid=${item.aid}&rate=${rate}`
						})
					}else if(item.file_type==7){
						 uni.setStorageSync('browseaudiu',item.file_path)
						 uni.navigateTo({
						 	url:'/pages/kc/audio/audio?name='+item.name
						 })
					}else{
						//  this.open(item.resource_id)
						//  return
						// uni.setStorageSync('browseFiles',item.file_path)
						uni.navigateTo({
							url:'/pages/kc/view/view?id='+item.resource_id
						})
					}
					// uni.navigateTo({
					// 	url: "/pages/kc/teacherkhzydetail/teacherkhzydetail?id=" + item.aid + '&name=' + item.title +'&course=' + this.course + '&type=3'
					// })
				}
			
			},
			async open(id){
				let res = await this.$api.post(global.apiUrls.post68dccdc5a9298, {
					resource_id:id
				});
				// this.isup = true
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				console.log(res.data.data)
			}
			// pagingListPostData() {
			// 	return this.pagingListPostDataContent
			// }
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto;

		.zy_flex_3_ibhf {
			width: 750rpx;
			height: 350rpx;
			overflow: hidden;
			z-index: 10;
			bottom: calc(0rpx + var(--window-bottom));

			.zy_fd3_1_ibhf {
				border-radius: 12rpx;
				width: 702rpx;
				line-height: 84rpx;
				font-size: 24rpx;
				background: #145EFD;
				color: #fff;
				height: 84rpx;
				margin: 80rpx 0rpx 80rpx 0rpx;
			}
		}

		.zy_flex_2_ibhf {
			padding: 0rpx 24rpx 0rpx 24rpx;
			background: var(--benbenbgColor1);
			background-size: 100% auto;

			.zy_fd2_0_ibhf {
				height: 125rpx;
				border-bottom: 1px solid #eee;

				.zy_fd2_0_c0_ibhf {
					width: 48rpx;
					height: 41rpx;
					border-radius: 0rpx;
				}

				.zy_fd2_0_c1_ibhf {
					color: #131D34;
					margin: 0rpx 0rpx 0rpx 30rpx;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 45rpx;
					text-align: left;
					font-style: normal;
				}

				.zy_fd2_0_c2_ibhf {
					margin: 0rpx 0rpx 0rpx auto;
				}
			}
		}

		.zy_fd2_1_ibhf {
			padding: 48rpx 24rpx 0rpx 24rpx;
		}

		.zy_fd2_1_c0_ibhf {
			width: 44rpx;
			height: 50rpx;
			border-radius: 0rpx;
			margin: 0rpx 33rpx 0rpx 0rpx;
		}

		.zy_fd2_1_c1_ibhf {
			padding: 0rpx 0rpx 30rpx 0rpx;
			border-bottom: 1px solid #eee;
		}

		.zy_fd2_1_c1_c0_ibhf {
			color: #131D34;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			margin: 0rpx 0rpx 12rpx 0rpx;
		}

		.zy_fd2_1_c1_c1_ibhf {
			color: #7A7B80;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
		}

		.zy_flex_1_ibhf {
			padding: 24rpx 0rpx 24rpx 0rpx;
			background: var(--benbenbgColor1);
			background-size: 100% auto;

			.zy_fd1_0_ibhf {
				background: #F5F6F7;
				width: 702rpx;
				height: 64rpx;
				border-radius: 32rpx;
				margin: 0rpx 0rpx 0rpx 24rpx;
				padding: 0rpx 0rpx 0rpx 32rpx;

				.zy_fd1_0_c0_ibhf {
					margin: 0rpx 20rpx 0rpx 0rpx;
				}

				.zy_fd1_0_c1_ibhf {
					height: 50rpx;
				}
			}
		}

		.zy_flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.zy_fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.zy_fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.zy_fd0_0_c0_ibhf {
			width: 120rpx;

			.zy_fd0_0_c0_c0_ibhf {
				font-size: 36rpx;
				color: #333;
			}
		}
	}
	.public-page-empty {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 120upx 0 0 0;
	
		image {
			width: 300rpx;
			height: 300rpx;
		}
	
		.txt {
			font-size: 28upx;
			color: $uni-text-color;
			text-align: center;
			line-height: 100upx;
			color: var(--benben-loading-color, #999999);
		}
	}
</style>
